<script setup lang="ts">
import { inject, computed } from 'vue'
import { activatedItemKey } from './symbol-key.ts'

const props = defineProps<{
  itemKey: string | number
  title: string
  subtitle: string
}>()

const activatedItem = inject(activatedItemKey)

const isActive = computed(() => activatedItem?.value === props.itemKey)

const fold = async () => {
  if (activatedItem?.value !== undefined && !isActive.value) {
    activatedItem.value = props.itemKey
  }
}
</script>

<template>
  <li class="accordion-item">
    <div class="title-border" @click="fold">
      <div
        :class="{ 'active-title': isActive, 'item-padding-bottom': !isActive }"
        class="main-title cursor-pointer"
      >
        <p>{{ title }}</p>
        <div class="px-[0.375rem]" v-show="!isActive">
          <div class="w-[0.875rem] h-[2px] bg-[#0000008c] translate-y-full"></div>
          <div
            class="w-[0.875rem] h-[2px] bg-[#0000008c]"
            style="transform-origin: center; transform: rotate(90deg)"
          ></div>
        </div>
      </div>

      <div :class="{ active: isActive }" class="fold-content">
        <div class="grid-item">
          <div class="bg-[#ebe8e3]">
            <div class="w-full overflow-hidden">
              <div class="subtitle item-padding-bottom">
                <p class="text-xs mt-[0.375rem] opacity-55">{{ subtitle }}</p>
              </div>
              <slot />
            </div>
          </div>
        </div>
      </div>
    </div>
  </li>
</template>

<style scoped>
@reference "@/assets/main.css";

li:not(:last-child) .title-border {
  border-bottom: 1px solid rgb(235, 232, 227);
}

.item-padding-bottom {
  @apply pb-[2.32vw] sm:pb-[0.5rem] lg:pb-[clamp(0.75rem,-0.25rem+1.5625vw,1.25rem)];
}
.subtitle {
  @apply mt-[0.375rem] px-[5.58vw]
  sm:px-[1.25rem]
  lg:px-[clamp(0.75rem,-0.25rem+1.5625vw,1.25rem)];

  p {
    @apply text-xs
    lg:text-base;
  }
}

div.main-title.active-title {
  background-color: #ebe8e3;
  padding-bottom: 0;
  cursor: default;
}
.main-title {
  @apply text-base flex items-center justify-between
  px-[5.58vw] pt-[2.32vw] bg-white

  sm:pt-[0.5rem] sm:px-[1.25rem]

  lg:text-lg lg:pt-[clamp(0.75rem,-0.25rem+1.5625vw,1.25rem)] lg:px-[clamp(0.75rem,-0.25rem+1.5625vw,1.25rem)];

  &:hover:not(.active-title) {
    background-color: #f5f5f5;
  }
}

.fold-content.active {
  grid-template-rows: 1fr;
}

.fold-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: all 0.3s;

  .grid-item {
    min-height: 0;
    overflow: hidden;
  }
}
</style>
